<template>
  <div class="page-container">
    <!-- 查询区域 -->
    <el-form :inline="true" :model="queryParams" class="mb-4">
      <el-form-item label="产品名称:">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入"
          clearable
          class="input-bordered"
        />
      </el-form-item>
      <el-form-item label="英文名称:">
        <el-input
          v-model="queryParams.englishName"
          placeholder="请输入"
          clearable
          class="input-bordered"
        />
      </el-form-item>
      <el-form-item label="产品规格:">
        <el-input
          v-model="queryParams.spec"
          placeholder="请输入"
          clearable
          class="input-bordered"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleQuery">查询</el-button>
        <el-button @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格区域 -->
    <el-table
      :data="tableData"
      border
      stripe
      style="width: 100%"
      :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
    >
      <el-table-column label="产品编号" prop="code" show-overflow-tooltip />
      <el-table-column label="产品名称" prop="name" show-overflow-tooltip>
        <template #default="{ row }">
          <el-link type="primary">{{ row.name }}</el-link>
        </template>
      </el-table-column>
          <el-table-column label="英文名称" prop="nameEn" show-overflow-tooltip />
    <el-table-column label="拉丁文名称" prop="nameLatin" show-overflow-tooltip />
    <el-table-column label="产品规格" prop="specs" show-overflow-tooltip />
    <el-table-column label="产品性状" prop="shape" show-overflow-tooltip />
    <el-table-column label="颜色外观" prop="exterior" show-overflow-tooltip />
    <el-table-column label="储存条件" prop="store" show-overflow-tooltip />
    </el-table>

    <!-- 分页器 -->
    <div class="pagination-wrapper">
      <el-pagination
        background
        layout="total, prev, pager, next, sizes, jumper"
        :total="total"
        :page-size="pageSize"
        :current-page="pageNum"
        :page-sizes="[10, 20, 50]"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { getProductListBySupplierId } from '@/api/busipart/supplierinfo/index'


// 加载数据方法
const loadData = async () => {
  try {
    const response = await getProductListBySupplierId({
      supplierId: props.supplierId,
      pageNum: pageNum.value,
      pageSize: pageSize.value,
      ...queryParams.value
    })

    // ✅ 因为 response 就是 { list, total }，所以直接赋值即可：
    tableData.value = response.list
    total.value = response.total
  } catch (err) {
    console.error('请求失败:', err)
    ElMessage.error('请求异常')
  }
}


// 定义 props 接收供应商ID
const props = defineProps({
  supplierId: {
    type: Number,
    default: null
  }
})

const queryParams = ref({
  name: '',
  englishName: '',
  spec: ''
})

// 模拟根据供应商ID获取的产品数据
const tableData = ref([])

const total = ref(3)
const pageSize = ref(10)
const pageNum = ref(1)

watch(
  () => props.supplierId,
  (newVal) => {
    if (newVal) {
      loadData()
    }
  },
  { immediate: true }
)


const handleQuery = () => {
  pageNum.value = 1
  loadData()
}

const resetQuery = () => {
  queryParams.value = {
    name: '',
    englishName: '',
    spec: ''
  }
  pageNum.value = 1
  loadData()
}

const handleSizeChange = (val) => {
  pageSize.value = val
  pageNum.value = 1
  loadData()
}

const handlePageChange = (val) => {
  pageNum.value = val
  loadData()
}
</script>

<style scoped>
.page-container {
  width: 100%;
  padding: 20px 0;
}

.mb-4 {
  margin-bottom: 16px;
}

.input-bordered {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}

.pagination-wrapper {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
  margin-right: 8px;
}
</style>